import { AnalysisData } from '@/pages/Index/data';
import type { DatePickerProps } from 'antd';
import { Card, Col, DatePicker, Row, Tabs } from 'antd';
import dayjs from 'dayjs';
import numeral from 'numeral';
import { useState } from 'react';
import styles from '../index.less';
import BarChart from './barChart';
const { TabPane } = Tabs;

function SalesArea (props) {
  let {rankingListData,barProps} = props
  return(
    <Row gutter={20}>
      <Col xl={16} lg={12} md={12} sm={24} xs={24}>
        <BarChart {...barProps} />
      </Col>
      <Col xl={8} lg={12} md={12} sm={24} xs={24}>
        <div className={styles.rankArea}>
          <p className={styles.title}>门店销售额排名</p>
          <ul className={styles.rankUl}>
            {rankingListData?.map((item, index) => (
              <li key={item.name + index} className={styles.rankRow}>
                <p>{item.name}</p>
                <p>{numeral(item.value).format('0,0')}</p>
              </li>
            ))}
          </ul>
        </div>
      </Col>
    </Row>
  )
}
function NumsArea(props) {
  let {rankingListData,barProps} = props
  return(
    <Row gutter={20}>
      <Col xl={16} lg={12} md={12} sm={24} xs={24}>
        <BarChart {...barProps} />
      </Col>
      <Col xl={8} lg={12} md={12} sm={24} xs={24}>
        <div className={styles.rankArea}>
          <p className={styles.title}>门店访问量排名</p>
          <ul className={styles.rankUl}>
            {rankingListData?.map((item, index) => (
              <li key={item.name + index + 'nums'} className={styles.rankRow}>
                <p>{item.name}</p>
                <p>{item.value}</p>
              </li>
            ))}
          </ul>
        </div>
      </Col>
    </Row>
  )
}

export default function PreTab(props: AnalysisData) {

  const [dateType, setDateType] = useState('day');
  const barProps = {
    height: 200,
    xAxisData: {},
    yAxisData: {},
    xField: {
      name: 'x名称',
      value: 'xValue',
    },
    yField: {
      name: 'y名称',
      type: 'yValue',
    },
    forceFit: true,
    maxColumnWidth: 10,
    data: props?.saleEData || [],
  };
  const rankingListData = props?.visitRankData;
  const dateList = [
    {
      label: '今日',
      value: 'day',
    },
    {
      label: '本周',
      value: 'week',
    },
    {
      label: '本月',
      value: 'month',
    },
    {
      label: '本年',
      value: 'year',
    },
  ];
  const selectDate = (type: string) => {
    setDateType(type);
  };
  const tabData = [
    {
      label:"销售额",
      value:'sales',
      component:<SalesArea rankingListData={rankingListData} barProps={barProps}/>,
    },
    {
      label:"访问量",
      value:'nums',
      component:<NumsArea rankingListData={rankingListData} barProps={barProps}/>,
    }
  ]

  const dateFormat = 'YYYY/MM/DD';
  const weekFormat = 'MM/DD';
  const monthFormat = 'YYYY/MM';
  const yearFormat = 'YYYY';
  const customWeekStartEndFormat: DatePickerProps['format'] = (value) =>
    `${dayjs(value).startOf('week').format(weekFormat)} ~ ${dayjs(value)
      .endOf('week')
      .format(weekFormat)}`;
  const getDatePicker = (dateType: string) => {
    return (
      <div>
        {
          {
            day: <DatePicker defaultValue={dayjs('2023/04/20', dateFormat)} format={dateFormat} />,
            week: (
              <DatePicker defaultValue={dayjs()} format={customWeekStartEndFormat} picker="week" />
            ),
            month: (
              <DatePicker
                defaultValue={dayjs('2015/01', monthFormat)}
                format={monthFormat}
                picker="month"
              />
            ),
            year: (
              <DatePicker
                defaultValue={dayjs('2015', yearFormat)}
                format={yearFormat}
                picker="year"
              />
            ),
          }[dateType]
        }
      </div>
    );
  };
  return (
    <Card style={{ marginTop: '20px' }}>
      <div className={styles.preTab}>
        <Tabs
          tabBarExtraContent={
            <div className={styles.salesExtraWrap}>
              <div className={styles.dateLi}>
                {dateList.map((items) => (
                  <span
                    key={items.value}
                    className={dateType === items.value ? `${styles.checkedData}` : ''}
                    onClick={() => selectDate(items.value)}
                  >
                    {dateType === items.value}
                    {items.label}
                  </span>
                ))}
              </div>
              <div className={styles.dateArea}>{getDatePicker(dateType)}</div>
            </div>
          }
          size="large"
          className={styles.conTab}
          items={tabData.map(item=>{
            return {
              label: item.label,
              key: item.value,
              children: item.component,
            }
          })}
        >
        </Tabs>
      </div>
    </Card>
  );
}
